import React, { useState, useEffect } from 'react'
import styles from './index.module.scss'
import { Link } from 'react-router-dom'
import { Card, Form, Input, Button, message } from 'antd'
import { useDispatch } from 'react-redux'
import { validatePassword, validatePhone, validateCode } from '../utils'

export interface FormValues {
  phone: string
  newPassword: string
  code: string
}

const Forget: React.FC = () => {
  const dispatch = useDispatch()
  const [messageApi, contextHolder] = message.useMessage()
  const [flag, setFlag] = useState(false)
  const [phone, setPhone] = useState('')
  const [password, setPassword] = useState('')
  const [code, setCode] = useState('')
  // 保存手机号
  const handlePhone = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPhone(e.target.value)
  }
  // 保存密码
  const handlePassword = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value)
  }
  // 保存验证码
  const handleCode = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCode(e.target.value)
  }

  // 改变flag
  useEffect(() => {
    if (phone) {
      setFlag(true)
    } else {
      setFlag(false)
    }
  }, [phone])

  const onFinish = (values: FormValues) => {
    if (values.code !== '123456') {
      // 验证码不对，提醒用户
      messageApi.open({
        type: 'error',
        content: '验证码错误！123456'
      })
      return
    }
    messageApi.open({
      type: 'success',
      content: '修改成功！'
    })
    dispatch({
      type: 'saveUserForget',
      payload: values
    })
  }

  return (
    <div className={styles.container}>
      {contextHolder}
      <Card>
        <p className={styles.title}>找回密码</p>
        <Form
          initialValues={{ remember: true }}
          onFinish={onFinish}>
          <Form.Item
            name='phone'
            rules={[{ validator: validatePhone }]}>
            <Input
              placeholder='请输入手机号'
              value={phone}
              onChange={handlePhone}
            />
          </Form.Item>
          <Form.Item
            name='newPassword'
            rules={[{ validator: validatePassword }]}>
            <Input.Password
              placeholder='请输入新密码'
              value={password}
              onChange={handlePassword}
            />
          </Form.Item>
          <Form.Item
            name='code'
            rules={[{ validator: validateCode }]}>
            <div className={styles.code}>
              <Input
                placeholder='请输入验证码'
                value={code}
                onChange={handleCode}
              />
              <Button
                type='primary'
                disabled={!flag}>
                获取验证码
              </Button>
            </div>
          </Form.Item>
          <Form.Item>
            <Button
              type='primary'
              htmlType='submit'>
              确定
            </Button>
          </Form.Item>
          <Form.Item>
            <Link to='/login'>立即登录</Link>
            <span className={styles.right}>
              没有账号？ <Link to='/register'>快速注册</Link>
            </span>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Forget
